<template>
  <div class="shop-management">
    <div class="page-header">
      <div class="header-left">
        <h2>店铺管理</h2>
      </div>
      <div class="header-right">
        <el-button type="info" @click="showStatsDialog">
          <el-icon><DataAnalysis /></el-icon>统计信息
        </el-button>
        <el-button type="danger" @click="handleBatchDelete" :disabled="selectedShops.length === 0">
          <el-icon><Delete /></el-icon>批量删除
        </el-button>
        <el-button type="primary" @click="showCreateDialog">
          <el-icon><Plus /></el-icon>新建店铺
        </el-button>
        <el-button type="success" @click="showBulkImportDialog">
          <el-icon><Upload /></el-icon>批量导入
        </el-button>
      </div>
    </div>

    <!-- 查询条件 -->
    <div class="search-panel">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="店铺名称">
          <el-input v-model="searchForm.shop_name" placeholder="请输入店铺名称" clearable />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.enabled" placeholder="请选择状态" clearable style="width: 120px">
            <el-option label="启用" value="1" />
            <el-option label="禁用" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="区域">
          <el-input v-model="searchForm.region_name" placeholder="请输入区域" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>查询
          </el-button>
          <el-button @click="resetSearch">
            <el-icon><RefreshRight /></el-icon>重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    
    <!-- 店铺列表 -->
    <div class="table-container">
      <el-table
        v-loading="loading.shops"
        :data="shops"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="shop_name" label="店铺名称" min-width="150" />
        <el-table-column prop="logo_img" label="店铺Logo" width="100">
          <template #default="{ row }">
            <el-image 
              v-if="row.logo_img" 
              :src="row.logo_img" 
              style="width: 50px; height: 50px"
              :preview-src-list="[row.logo_img]"
              fit="cover"
            >
              <template #error>
                <div class="image-error">无图片</div>
              </template>
            </el-image>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="shipping_address" label="配送地址" min-width="200" />
        <el-table-column prop="shop_address" label="店铺地址" min-width="200" />
        <el-table-column prop="region_name" label="所属区域" min-width="120" />
        <el-table-column prop="enabled" label="启用" width="80">
          <template #default="{ row }">
            <el-tag :type="row.enabled === '启用' ? 'success' : 'info'">
              {{ row.enabled }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="final_exec_timestamp" label="最后执行时间" width="180" />
        <el-table-column prop="item_count" label="商品数量" width="100" />
        <el-table-column prop="present_state" label="当前状态" width="120" />
        <el-table-column prop="created_at" label="创建时间" width="180" />
        <el-table-column prop="store_id" label="门店编号" width="100" />
        <el-table-column label="操作" width="220" fixed="right">
          <template #default="{ row }">
            <el-button-group>
              <el-button type="primary" @click="showEditDialog(row)">
                <el-icon><Edit /></el-icon>编辑
              </el-button>
              <el-button :type="row.enabled === '启用' ? 'warning' : 'success'" @click="handleToggleStatus(row)">
                <el-icon><SwitchButton /></el-icon>
                {{ row.enabled === '启用' ? '禁用' : '启用' }}
              </el-button>
              <el-button type="danger" @click="handleDelete(row)">
                <el-icon><Delete /></el-icon>删除
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 创建/编辑店铺对话框 -->
    <el-dialog
      v-model="dialogs.shop"
      :title="editingShop.id ? '编辑店铺' : '新建店铺'"
      width="750px"
    >
      <el-form
        ref="shopFormRef"
        :model="editingShop"
        :rules="shopRules"
        label-width="120px"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="店铺名称" prop="shop_name">
              <el-input v-model="editingShop.shop_name" placeholder="请输入店铺名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="门店编号" prop="store_id">
              <el-input v-model="editingShop.store_id" placeholder="请输入门店编号" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="店铺Logo" prop="logo_img">
          <el-upload
            class="logo-uploader"
            action="/api/file/upload"
            :show-file-list="false"
            :on-success="handleLogoSuccess"
            :before-upload="beforeLogoUpload"
          >
            <el-image
              v-if="editingShop.logo_img"
              :src="editingShop.logo_img"
              class="logo-image"
              fit="cover"
            />
            <el-icon v-else class="logo-icon"><Plus /></el-icon>
          </el-upload>
          <div class="upload-tip">建议上传正方形图片，尺寸不小于300x300</div>
        </el-form-item>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="配送地址" prop="shipping_address">
              <el-input v-model="editingShop.shipping_address" placeholder="请输入配送地址" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="店铺地址" prop="shop_address">
              <el-input v-model="editingShop.shop_address" placeholder="请输入店铺地址" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="经度" prop="longitude">
              <el-input v-model="editingShop.longitude" placeholder="请输入经度" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纬度" prop="latitude">
              <el-input v-model="editingShop.latitude" placeholder="请输入纬度" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="省/自治区" prop="provincia_level_name">
              <el-input v-model="editingShop.provincia_level_name" placeholder="请输入省/自治区" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="市" prop="municipa_level_name">
              <el-input v-model="editingShop.municipa_level_name" placeholder="请输入市" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="区/县" prop="district_level_name">
              <el-input v-model="editingShop.district_level_name" placeholder="请输入区/县" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="区域名称" prop="region_name">
              <el-input v-model="editingShop.region_name" placeholder="请输入区域名称" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="是否启用" prop="enabled">
              <el-switch
                v-model="editingShop.enabled"
                active-value="启用"
                inactive-value="禁用"
                active-text="启用"
                inactive-text="禁用"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="当前状态" prop="present_state">
              <el-input v-model="editingShop.present_state" placeholder="请输入当前状态" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogs.shop = false">取消</el-button>
          <el-button type="primary" :loading="loading.submit" @click="handleSubmitShop">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 批量导入对话框 -->
    <el-dialog
      v-model="dialogs.bulkImport"
      title="批量导入店铺"
      width="600px"
    >
      <div class="bulk-import-dialog">
        <el-alert
          type="info"
          show-icon
          :closable="false"
          title="请按照JSON格式输入店铺数据，每行一个店铺对象"
        />
        <p class="format-example">格式示例：<code>[{"shop_name": "门店1", "shipping_address": "地址1", "enabled": "1"}]</code></p>
        <el-input
          v-model="bulkImportData"
          type="textarea"
          :rows="10"
          placeholder="请输入JSON格式的店铺数据"
          @input="validateBulkImportData"
        />
        <div v-if="bulkImportError" class="json-error">
          <el-alert
            type="error"
            show-icon
            :closable="false"
            :title="bulkImportError"
          />
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogs.bulkImport = false">取消</el-button>
          <el-button type="primary" :loading="loading.bulkImport" @click="handleBulkImport">
            导入
          </el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 统计信息对话框 -->
    <el-dialog
      v-model="dialogs.stats"
      title="店铺统计信息"
      width="900px"
    >
      <div class="stats-container" v-loading="loading.stats">
        <!-- 总览统计卡片 -->
        <el-card shadow="hover" class="stats-overview-card">
          <div class="overview-header">
            <h3>总览</h3>
            <el-button type="primary" size="small" @click="fetchShopStats">
              <el-icon><Refresh /></el-icon>刷新
            </el-button>
          </div>
          <div class="total-stats">
            <div class="stat-item">
              <div class="stat-value">{{ shopStats.total_shops || 0 }}</div>
              <div class="stat-label">店铺总数</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ shopStats.regions?.total || 0 }}</div>
              <div class="stat-label">区域总数</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ shopStats.districts?.total || 0 }}</div>
              <div class="stat-label">区/县总数</div>
            </div>
          </div>
        </el-card>
        
        <!-- 区域分布和区/县分布 -->
        <div class="stats-details">
          <el-tabs type="border-card">
            <el-tab-pane label="区域分布">
              <el-table :data="shopStats.regions?.items || []" style="width: 100%" max-height="350">
                <el-table-column prop="name" label="区域名称" min-width="180" />
                <el-table-column prop="count" label="店铺数量" width="100" />
                <el-table-column label="占比" width="220">
                  <template #default="{ row }">
                    <el-progress 
                      :percentage="Math.round((row.count / (shopStats.total_shops || 1)) * 100)" 
                      :format="(p) => `${p}%`"
                      :color="getRandomColor(row.name)"
                    />
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="区/县分布">
              <el-table :data="shopStats.districts?.items || []" style="width: 100%" max-height="350">
                <el-table-column prop="name" label="区/县名称" min-width="180" />
                <el-table-column prop="count" label="店铺数量" width="100" />
                <el-table-column label="占比" width="220">
                  <template #default="{ row }">
                    <el-progress 
                      :percentage="Math.round((row.count / (shopStats.total_shops || 1)) * 100)" 
                      :format="(p) => `${p}%`"
                      :color="getRandomColor(row.name)"
                    />
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogs.stats = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Edit, Delete, Search, RefreshRight, Upload, SwitchButton, DataAnalysis, Refresh } from '@element-plus/icons-vue'
// 导入接口API
import { getShopList, createShop, updateShop, deleteShop, bulkCreateShops, bulkUpdateShopStatus, bulkDeleteShops } from '@/api/shop'
import { getShopStats } from '@/api/shop' // 导入获取店铺统计的API

// 搜索表单
const searchForm = reactive({
  shop_name: '',
  enabled: '',
  region_name: ''
})

// 多选相关
const selectedShops = ref([])

// 状态变量
const shops = ref([])
const editingShop = ref({
  shop_name: '',
  shipping_address: '',
  logo_img: '',
  shop_address: '',
  longitude: '',
  latitude: '',
  provincia_level_name: '',
  municipa_level_name: '',
  district_level_name: '',
  region_name: '',
  enabled: '启用',
  final_exec_timestamp: '',
  item_count: '',
  present_state: '',
  created_at: '',
  store_id: ''
})
const bulkImportData = ref('')
const bulkImportError = ref('')
const shopStats = ref({
  total_shops: 0,
  regions: {
    total: 0,
    items: []
  },
  districts: {
    total: 0,
    items: []
  }
})

// 加载状态
const loading = reactive({
  shops: false,
  submit: false,
  bulkImport: false,
  batchDelete: false,
  stats: false
})

// 对话框显示状态
const dialogs = reactive({
  shop: false,
  bulkImport: false,
  stats: false
})

// 分页
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 表单引用
const shopFormRef = ref(null)

// 表单验证规则
const shopRules = {
  shop_name: [
    { required: true, message: '请输入店铺名称', trigger: 'blur' },
    { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
  ],
  shipping_address: [
    { required: true, message: '请输入配送地址', trigger: 'blur' }
  ],
  shop_address: [
    { required: true, message: '请输入店铺地址', trigger: 'blur' }
  ],
  provincia_level_name: [
    { required: true, message: '请输入省/自治区', trigger: 'blur' }
  ],
  municipa_level_name: [
    { required: true, message: '请输入市', trigger: 'blur' }
  ],
  district_level_name: [
    { required: true, message: '请输入区/县', trigger: 'blur' }
  ]
}

// 图片上传相关
const handleLogoSuccess = (response, file) => {
  if (response.code === 0 && response.data) {
    editingShop.value.logo_img = response.data.url
  } else {
    ElMessage.error('图片上传失败')
  }
}

const beforeLogoUpload = (file) => {
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isJPG) {
    ElMessage.error('上传图片只能是 JPG/PNG 格式!')
  }
  if (!isLt2M) {
    ElMessage.error('上传图片大小不能超过 2MB!')
  }
  return isJPG && isLt2M
}

// 初始化
onMounted(() => {
  fetchShopList()
})

// 获取店铺列表
const fetchShopList = async () => {
  try {
    loading.shops = true
    const params = {
      keyword: searchForm.shop_name,
      status: searchForm.enabled,
      region_name: searchForm.region_name,
      page: pagination.currentPage,
      page_size: pagination.pageSize
    }
    
    const response = await getShopList(params)
    shops.value = response.items || []
    pagination.total = response.total || 0
  } catch (error) {
    console.error('获取店铺列表失败:', error)
    ElMessage.error('获取店铺列表失败')
  } finally {
    loading.shops = false
  }
}

// 获取店铺统计信息
const fetchShopStats = async () => {
  try {
    loading.stats = true
    const response = await getShopStats()
    if (response && !response.error) {
      shopStats.value = response
    } else {
      console.error('获取店铺统计失败:', response?.error)
      ElMessage.warning('获取店铺统计失败')
    }
  } catch (error) {
    console.error('获取店铺统计失败:', error)
    ElMessage.warning('获取店铺统计失败')
  } finally {
    loading.stats = false
  }
}

// 颜色生成函数 - 根据字符串生成固定的颜色
const getRandomColor = (str) => {
  let hash = 0;
  for (let i = 0; i < str.length; i++) {
    hash = str.charCodeAt(i) + ((hash << 5) - hash);
  }
  
  const colors = [
    '#67C23A', '#409EFF', '#E6A23C', '#F56C6C', 
    '#909399', '#2ECDD4', '#6366F1', '#8957e5',
    '#27ae60', '#f1c40f', '#e67e22', '#16a085'
  ];
  
  // 将哈希值转换为0到colors.length-1的索引
  const index = Math.abs(hash) % colors.length;
  return colors[index];
}

// 显示创建对话框
const showCreateDialog = () => {
  editingShop.value = {
    shop_name: '',
    shipping_address: '',
    logo_img: '',
    shop_address: '',
    longitude: '',
    latitude: '',
    provincia_level_name: '',
    municipa_level_name: '',
    district_level_name: '',
    region_name: '',
    enabled: '启用',
    final_exec_timestamp: null,
    item_count: '0',
    present_state: '正常',
    store_id: null
  }
  dialogs.shop = true
  // 确保下一个tick表单重置
  setTimeout(() => {
    shopFormRef.value?.resetFields()
  }, 0)
}

// 显示编辑对话框
const showEditDialog = (shop) => {
  editingShop.value = JSON.parse(JSON.stringify(shop)) // 深拷贝
  dialogs.shop = true
}

// 提交店铺表单
const handleSubmitShop = async () => {
  if (!shopFormRef.value) return
  
  await shopFormRef.value.validate(async (valid) => {
    if (!valid) return
    
    try {
      loading.submit = true
      
      // 转换数据类型
      const shopData = { ...editingShop.value }
      
      // 处理门店编号
      if (shopData.store_id && typeof shopData.store_id === 'string') {
        shopData.store_id = parseInt(shopData.store_id, 10) || null
      }
      
      // 处理日期字段，如果为空字符串则不传递
      if (shopData.final_exec_timestamp === '') {
        delete shopData.final_exec_timestamp
      }
      
      if (editingShop.value.id) {
        // 更新
        await updateShop(editingShop.value.id, shopData)
        ElMessage.success('店铺更新成功')
      } else {
        // 创建
        await createShop(shopData)
        ElMessage.success('店铺创建成功')
      }
      
      dialogs.shop = false
      fetchShopList() // 刷新列表
    } catch (error) {
      console.error('提交店铺信息失败:', error)
      ElMessage.error(error.response?.data?.detail || '提交失败')
    } finally {
      loading.submit = false
    }
  })
}

// 删除店铺
const handleDelete = async (shop) => {
  try {
    await ElMessageBox.confirm(`确定要删除店铺"${shop.shop_name}"吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    await deleteShop(shop.id)
    ElMessage.success('删除成功')
    fetchShopList() // 刷新列表
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除店铺失败:', error)
      ElMessage.error('删除失败')
    }
  }
}

// 切换店铺状态
const handleToggleStatus = async (shop) => {
  const newStatus = shop.enabled === '启用' ? '禁用' : '启用'
  const statusText = newStatus === '启用' ? '启用' : '禁用'
  
  try {
    await ElMessageBox.confirm(`确定要${statusText}店铺"${shop.shop_name}"吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    await updateShop(shop.id, { enabled: newStatus })
    ElMessage.success(`${statusText}成功`)
    fetchShopList() // 刷新列表
  } catch (error) {
    if (error !== 'cancel') {
      console.error(`${statusText}店铺失败:`, error)
      ElMessage.error(`${statusText}失败`)
    }
  }
}

// 处理查询
const handleSearch = () => {
  pagination.currentPage = 1 // 重置到第一页
  fetchShopList()
}

// 重置查询
const resetSearch = () => {
  searchForm.shop_name = ''
  searchForm.enabled = ''
  searchForm.region_name = ''
  pagination.currentPage = 1
  fetchShopList()
}

// 分页相关
const handleSizeChange = (val) => {
  pagination.pageSize = val
  fetchShopList()
}

const handleCurrentChange = (val) => {
  pagination.currentPage = val
  fetchShopList()
}

// 多选处理
const handleSelectionChange = (selection) => {
  selectedShops.value = selection
}

// 批量删除
const handleBatchDelete = async () => {
  if (selectedShops.value.length === 0) {
    ElMessage.warning('请至少选择一条记录')
    return
  }
  
  try {
    await ElMessageBox.confirm(`确定要删除选中的${selectedShops.value.length}个店铺吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    loading.batchDelete = true
    const ids = selectedShops.value.map(item => item.id)
    await bulkDeleteShops({ ids })
    ElMessage.success('批量删除成功')
    fetchShopList() // 刷新列表
  } catch (error) {
    if (error !== 'cancel') {
      console.error('批量删除失败:', error)
      ElMessage.error('批量删除失败')
    }
  } finally {
    loading.batchDelete = false
  }
}

// 显示批量导入对话框
const showBulkImportDialog = () => {
  bulkImportData.value = ''
  bulkImportError.value = ''
  dialogs.bulkImport = true
}

// 验证批量导入数据
const validateBulkImportData = (value) => {
  if (!value.trim()) {
    bulkImportError.value = ''
    return
  }
  try {
    const data = JSON.parse(value)
    if (!Array.isArray(data)) {
      bulkImportError.value = '数据格式错误：应为JSON数组'
      return
    }
    for (const item of data) {
      if (!item.shop_name) {
        bulkImportError.value = '数据格式错误：店铺名称不能为空'
        return
      }
    }
    bulkImportError.value = ''
  } catch (error) {
    bulkImportError.value = 'JSON格式错误: ' + error.message
  }
}

// 批量导入店铺
const handleBulkImport = async () => {
  if (bulkImportError.value) {
    ElMessage.warning('请先修正数据格式错误')
    return
  }
  
  if (!bulkImportData.value.trim()) {
    ElMessage.warning('请输入要导入的数据')
    return
  }
  
  try {
    loading.bulkImport = true
    const shops = JSON.parse(bulkImportData.value)
    
    // 处理数据格式，确保每个字段类型正确
    const formattedShops = shops.map(shop => {
      const formattedShop = { ...shop }
      if (formattedShop.store_id && typeof formattedShop.store_id === 'string') {
        formattedShop.store_id = parseInt(formattedShop.store_id, 10) || 0
      }
      return formattedShop
    })
    
    const result = await bulkCreateShops(formattedShops)
    ElMessage.success(`成功导入${result.count}条店铺数据`)
    dialogs.bulkImport = false
    fetchShopList() // 刷新列表
  } catch (error) {
    console.error('批量导入失败:', error)
    ElMessage.error(error.response?.data?.detail || '批量导入失败')
  } finally {
    loading.bulkImport = false
  }
}

// 显示统计信息对话框
const showStatsDialog = () => {
  dialogs.stats = true
  fetchShopStats() // 打开对话框时获取最新统计数据
}
</script>

<style scoped>
.shop-management {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-left h2 {
  margin: 0;
}

.header-right {
  display: flex;
  gap: 10px;
}

.search-panel {
  background-color: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
}

.stats-panel {
  margin-bottom: 20px;
}

.stats-card {
  margin-bottom: 15px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.total-stats {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 0;
}

.stat-item {
  text-align: center;
  padding: 10px 20px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}

.stats-detail-row {
  margin-top: 15px;
}

.stats-detail-card {
  height: 100%;
}

.table-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.operation-buttons {
  display: flex;
  flex-wrap: nowrap;
}

.bulk-import-dialog {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.format-example {
  font-size: 14px;
  color: #606266;
}

.format-example code {
  background-color: #f5f7fa;
  padding: 2px 5px;
  border-radius: 3px;
  font-family: monospace;
}

.json-error {
  margin-top: 10px;
}

/* 新增样式 */
.logo-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.logo-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.logo-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  text-align: center;
  line-height: 120px;
}

.logo-image {
  width: 120px;
  height: 120px;
  display: block;
}

.upload-tip {
  font-size: 12px;
  color: #606266;
  margin-top: 5px;
}

.image-error {
  width: 50px;
  height: 50px;
  background-color: #f5f7fa;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: #909399;
}

.stats-container {
  padding: 20px;
}

.stats-overview-card {
  margin-bottom: 20px;
}

.overview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.total-stats {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 0;
}

.stat-item {
  text-align: center;
  padding: 10px 20px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}

.stats-details {
  margin-top: 20px;
}
</style> 